import {View, Text, ScrollView} from '@tarojs/components'
import {inject, observer} from 'mobx-react'
import {useEffect} from 'react'
import {IMG_URL} from '@/commons/constant'
import './index.scss'

export default inject('store')(observer(props => {
  const {broadStore} = props.store
  useEffect(async () => {
    broadStore.getBroadList()
    return undefined
  }, [])
 
  const {style={}} = props
  const borad = () => (
    broadStore.list.map(item => (
      <View className="borad-item" key={item._id}>
        <View 
          className="dask-img" 
          style={{backgroundColor: style.imgbgcolor}}
        > 
          <image className="borad-img" src={IMG_URL + item.avatar} />
        </View>
        {item.status ? <Text className="broad-running">{item.status && '直播中'}</Text> : null}
        <View 
          className="borad-user" 
          style={{color: style.color}}>
          {item.user}
        </View>
      </View>
    ))
  )
  return (
    <ScrollView className="borad-list"
      scrollX={true}
      enableFlex={true}
      > 
     {borad()}
    </ScrollView>
  )
 
 

}))

